<template>
	<view :style="colorStyle">
		<view class="ChangePassword">
			<form @submit="submitPay">
        <view class="list">
          <view class="item">
            <view class="phone">{{$t(`订单号`)}}：{{orderInfo.order_id}}</view>
          </view>
        </view>
        <view class="list">
          <view class="item">
            <view class="phone">{{$t(`支付金额`)}}：<text class="money">{{$t(`￥`)}}{{orderInfo.pay_price}}</text></view>
          </view>
        </view>
				<view class="list">
					<view class="item">
						<input type='number' :placeholder='$t(`输入验证码`)' placeholder-class='placeholder'
							name="captcha" :value="captcha"></input>
					</view>
				</view>
				<button form-type="submit" class="confirmBnt bg-color">{{$t(`确认支付`)}}</button>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
  import {
    getOrderDetail,
    orderBankPay
  } from '@/api/order.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		components: {
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {
				userInfo: {},
        order_id: '',
				captcha: '',
        orderInfo: {},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserInfo();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
      if (options.order_id) {
        this.$set(this, 'order_id', options.order_id);
      }
			if (this.isLogin) {
				this.getUserInfo();
				this.getOrderInfo();
			} else {
				toLogin()
			}
		},
		methods: {
			/**
			 * 授权回调
			 */
			onLoadFun: function(e) {
				this.getUserInfo();
				this.getOrderInfo();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
				});
			},
      /**
       * 获取订单详细信息
       */
      getOrderInfo: function() {
        let that = this;
        let obj = getOrderDetail(this.order_id);
        obj.then(res => {
          that.$set(that, 'orderInfo', res.data);
        }).catch(err => {
          that.$util.Tips({
            title: err
          }, '/pages/goods/order_list/index');
        });
      },
      submitPay(e) {
        let that = this,
            captcha = e.detail.value.captcha;
        if (!captcha) return that.$util.Tips({
          title: that.$t(`请输入验证码`)
        });
        if (!that.order_id) return that.$util.Tips({
          title: that.$t(`请选择要支付的订单`)
        });
        uni.showLoading({
          title: that.$t(`支付中`)
        });
        orderBankPay({
          order_id: that.order_id,
          captcha: captcha,
          // #ifdef H5
          quitUrl: location.port ? location.protocol + '//' + location.hostname + ':' + location
                  .port +
              '/pages/goods/order_details/index?order_id=' + this.order_id : location.protocol +
              '//' + location.hostname +
              '/pages/goods/order_details/index?order_id=' + this.order_id
          // #endif
          // #ifdef APP-PLUS
          quitUrl: '/pages/goods/order_details/index?order_id=' + this.order_id
          // #endif
        }).then(res => {
          let status = res.data.status,
              order_id = res.data.result.order_id,
              jsConfig = res.data.result.jsConfig,
              pay_price = res.data.result.pay_price,
              goPages = '/pages/goods/order_pay_status/index?order_id=' + order_id + '&msg=' +
                  res.msg + '&type=3' + '&totalPrice=' + pay_price
          switch (status) {
            case 'ORDER_EXIST':
            case 'EXTEND_ORDER':
              uni.hideLoading();
              return that.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages
              });
            case 'PAY_ERROR':
              uni.hideLoading();
              return that.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages
              });
              break;
            case 'SUCCESS':
              uni.hideLoading();
              return that.$util.Tips({
                title: res.msg,
                icon: 'success'
              }, {
                tab: 4,
                url: goPages
              });
              break;
            case "FAST_BANK":
              uni.hideLoading();
              that.$util.Tips({
                title: jsConfig.respMsg
              }, {
                tab: 4,
                url: goPages + '&status=0'
              });
              break;
          }

        }).catch(err => {
          uni.hideLoading();
          return that.$util.Tips({
            title: err
          }, () => {
            that.$emit('onChangeFun', {
              action: 'pay_fail'
            });
          });
        })
      }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}
	.ChangePassword .phone {
		font-size: 30rpx;
		text-align: left;
		margin-top: 40rpx;
	}

  .ChangePassword .phone .money {
    color: red;
  }

	.ChangePassword .list {
		width: 580rpx;
		margin: 53rpx auto 0 auto;
	}

	.ChangePassword .list .item {
		width: 100%;
		height: 110rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.ChangePassword .list .item input {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
	}

	.ChangePassword .list .item .placeholder {
		color: #b9b9bc;
	}

	.ChangePassword .list .item input.codeIput {
		width: 340rpx;
	}

	.ChangePassword .list .item .code {
		font-size: 32rpx;
		background-color: #fff;
	}

	.ChangePassword .list .item .code.on {
		color: #b9b9bc !important;
	}

	.ChangePassword .confirmBnt {
		font-size: 32rpx;
		width: 580rpx;
		height: 90rpx;
		border-radius: 45rpx;
		color: #fff;
		margin: 92rpx auto 0 auto;
		text-align: center;
		line-height: 90rpx;
	}
</style>
